<template>
  <zk-topBg
    showStash
    paddingTop="30"
    :showBack="true"
    title="报损管理"></zk-topBg>
  <view class="main">
    <view class="topBox">
      <zk-selectBox
        peaseSelect="报损状态"
        assemblyStyle="width:90px;"
        v-model:modelValue="lossStatus"
        value="value"
        label="text"
        :options="useLossStore.lossStatusDict"></zk-selectBox>
      <zk-selectBox
        peaseSelect="报损类型"
        assemblyStyle="width:90px;"
        v-model:modelValue="lossType"
        value="value"
        label="text"
        :options="useLossStore.lossTypeDict"></zk-selectBox>
      <view class="dataInput"><zk-date v-model:date="lossDate"></zk-date></view>
      <input
        type="text"
        class="textInput"
        v-model="searchParam"
        placeholder="物资名称/编号"
        placeholderStyle="font-size: 14px;color: #CCCCD3;" />
      <zk-btn iconType="search" iconSize="16px" @tap.stop="goQuery"
        >查询</zk-btn
      >
      <view style="width: 10px; height: 10px"></view>
      <zk-btn
        iconType="trash"
        iconSize="16px"
        :delBtn="true"
        iconColor="#000000"
        @tap.stop="dleLossAllData"
        >批量删除</zk-btn
      >
      <zk-btn
        iconType="plusempty"
        iconSize="16px"
        @tap.stop="goLossContent('newAddition')"
        >新增报损</zk-btn
      >
    </view>
    <view class="dataCard">
      <checkbox-group @change="checkboxAllChange">
        <view class="cardTitle">
          <view class="titleText" style="width: 48px">
            <checkbox
              style="transform: scale(0.59)"
              color="#32966F"
              value="selectAll"
              :checked="selectAll" />
          </view>
          <view
            class="titleText"
            v-for="(item, index) in useLossStore.titleStatus"
            :key="index"
            :style="item.style"
            >{{ item.text }}
          </view>
          <view class="titleText" style="width: 92px">操作</view>
        </view>
      </checkbox-group>
      <checkbox-group @change="checkboxChange">
        <scroll-view :scroll-y="true" class="cardList">
          <view
            class="listData"
            v-for="(list, indexNum) in useLossStore.dataList"
            :key="indexNum">
            <view class="titleText" style="width: 48px">
              <checkbox
                style="transform: scale(0.59)"
                color="#32966F"
                :value="list['Uuid']"
                :checked="selectList.includes(list['Uuid'])" />
            </view>
            <view
              class="titleText"
              v-for="(item, index) in useLossStore.titleStatus"
              :key="index"
              :style="item.style">
              <text
                v-if="item.name === 'DamageStatusName'"
                :class="list['DamageStatus']"
                >{{ list[item.name] }}</text
              >
              <text
                v-else-if="item.name === 'DamageReplyStatusName'"
                :class="list['DamageReplyStatus'] || 'unsubmitted'"
                >{{ list[item.name] || "未提交" }}</text
              >
              <text v-else>{{ list[item.name] }}</text>
            </view>
            <view class="titleText tailBtn">
              <text
                v-if="
                  list['DamageStatus'] === 'DamageEdit' ||
                  list['DamageReplyStatus'] === 'CheckFail'
                "
                @tap.stop="goLossContent('edit', list)"
                >编辑</text
              >
              <text v-else @tap.stop="goLossContent('details', list)"
                >详情</text
              >
              <text
                v-if="list['DamageStatus'] != 'DamageEdit'"
                style="color: #d1d1d1"
                >删除</text
              >
              <text @tap.stop="dleLossData(list['Uuid'])" v-else>删除</text>
            </view>
          </view>
        </scroll-view>
      </checkbox-group>
    </view>
    <zk-pagination
      style="margin-top: 6px"
      :total="useLossStore.total"
      :setPage="setPage"
      @event-change="setPageNum"></zk-pagination>
  </view>
</template>

<script setup lang="ts">
import { useLossManageStore } from "@/stores/modules/lossManage";
import { useMemberStore } from "@/stores/modules/member";
import { onShow } from "@dcloudio/uni-app";
const useLossStore = useLossManageStore();
const useMember = useMemberStore();

onBeforeMount(() => {
  let lossData = {
    searchParam: searchParam.value,
    DamageDateBegin: lossDate[0],
    DamageDateEnd: lossDate[1],
    DamageStatus: lossStatus.value,
    GodownCode: useMember.GodownCode,
    DamageType: lossType.value,
    GodownKeeper: useMember.defaultStash.GodownKeeper,
  }; // 请求的参数
  useLossStore.getDictData(
    { DictStatus: "Normal", DictType: "DamageStatus" },
    "lossStatusDict"
  ); // 报损状态字典查询
  useLossStore.getDictData(
    { DictStatus: "Normal", DictType: "DamageType" },
    "lossTypeDict"
  ); // 报损类型字典查询
  useLossStore.getLossListData({ pageNum: 1, pageSize: 10, ...lossData });
});

let lossStatus = ref("");
let lossType = ref("");
let searchParam = ref(""); // 模糊搜索内容
let lossDate = reactive([]); // 报损时间,数组格式[开始时间，结束时间]

let setPage = reactive({
  state: true,
  num: 1,
}); // 传入分页器的页码

const goQuery = () => {
  setPage.state = !setPage.state;
  setPage.num = 1;
}; // 查询时出发事件重新请求数据

const setPageNum = (e: object) => {
  let lossData = {
    searchParam: searchParam.value,
    DamageDateBegin: lossDate[0],
    DamageDateEnd: lossDate[1],
    DamageStatus: lossStatus.value,
    GodownCode: useMember.GodownCode,
    DamageType: lossType.value,
    GodownKeeper: useMember.defaultStash.GodownKeeper,
  }; // 请求的参数
  useLossStore.getLossListData({ ...e, ...lossData });
}; // 请求数据

let selectAll = ref(false); // 全选按钮选中状态
let selectList = ref([]); // 单独选中列表内容
const checkboxAllChange = (e: any) => {
  if (e.detail.value.length === 1) {
    selectAll.value = true;
    selectList.value = useLossStore.dataList.map((e) => {
      return e["Uuid"];
    });
  } else {
    selectAll.value = false;
    selectList.value = [];
  }
}; // 全选按钮触发时

const checkboxChange = (e: any) => {
  selectList.value = e.detail.value;
  if (selectList.value.length === useLossStore.dataList.length) {
    selectAll.value = true;
    return;
  }
  selectAll.value = false;
}; // 列表选中按钮触发时

const dleLossData = (Uuid: string) => {
  uni.showModal({
    title: "重要提示",
    content: "确定删除这1条数据吗,数据删除后不可恢复",
    confirmText: "删除",
    confirmColor: "#F73B4A",
    success: function (res) {
      if (res.confirm) {
        console.log({ Uuid });

        useLossStore.deleteLossData({ Uuid });
        setPage.state = !setPage.state;
      } else if (res.cancel) {
        return;
      }
    },
  });
}; // 单独删除

const dleLossAllData = () => {
  uni.showModal({
    title: "重要提示",
    content: `确定删除这${selectList.value.length}条数据吗,数据删除后不可恢复`,
    confirmText: "删除",
    confirmColor: "#F73B4A",
    success: async function (res) {
      if (res.confirm) {
        let data = {
          Uuid: selectList.value.join(","),
        };
        await useLossStore.deleteLossAllData(data);
        setPage.state = !setPage.state;
      } else if (res.cancel) {
        return;
      }
    },
  });
}; // 批量删除

const goLossContent = (status: string, data?: object) => {
  uni.navigateTo({
    url: `lossContent/lossContent?status=${status}`,
    success: function (res) {
      if (data) {
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit("channelData", data);
      }
    },
  });
};

onShow(() => {
  goQuery();
}); // 页面每次出现时都重新获取数据
</script>

<style lang="scss" scoped>
.main {
  position: relative;
  z-index: 1;
  width: 870px;
  height: 506px;
  margin: 16px auto 0;
  align-items: center;
  padding: 20px 20px 6px;
  border-radius: 10px;
  background: rgb(255, 255, 255);

  .topBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 40px;

    .dataInput {
      width: 216px;
    }

    .textInput {
      width: 116px;
      height: 40px;
      box-sizing: border-box;
      border: 1px solid rgb(228, 228, 228);
      border-radius: 6px;
      line-height: 40px;
      font-size: 14px;
      padding: 0 12px;
    }
  }

  .dataCard {
    margin-top: 16px;
    width: 100%;

    .cardTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 40px;
      border-radius: 6px;
      padding: 0 12px;
      font-size: 14px;
      color: #adafb8;
      background-color: #f2f3f4;

      .titleText {
        text-align: center;
      }
    }

    .tailBtn {
      width: 92px;
      display: flex;
      justify-content: space-around;
      padding: 0 6px;
      color: #32966f;
    }

    .cardList {
      width: 100%;
      height: 340px;
      font-size: 14px;

      .listData {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 48px;
        padding: 0 12px;
        border-bottom: 1px solid rgb(244, 244, 244);

        .titleText {
          text-align: center;
        }
      }

      // 不同状态的样式
      .DamageEdit {
        color: #efa022;
      }

      .DamageSubmit {
        color: #32966f;
      }

      .CheckPass {
        color: #32966f;
      }

      .CheckNot {
        color: #efa022;
      }

      .CheckFail {
        color: #f73b4a;
      }

      .unsubmitted {
        color: #4875ff;
      }
    }
  }
}

::v-deep.uni-select__input-text {
  color: rgb(96, 98, 102);
}

::v-deep.uni-select {
  border: 1px solid rgb(228, 228, 228);
  border-radius: 2px;
}

::v-deep.zk_btn .text {
  margin: 0 2px !important;
}

::v-deep #selectBox .selectBox .icon {
  margin-left: 0;
}

::v-deep #selectBox .optionsList .option {
  text-align: center;
  padding: 0 0;
}

::v-deep .fs_16 {
  font-size: 14px;
}

::v-deep uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
  border-color: #d1d1d1;
}

// ::v-deep uni-checkbox:not([disabled]) .uni-checkbox-input{
//   border-color: #32966F;
// }
::v-deep.uni-input-placeholder {
  font-size: 14px;
}
</style>
